<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/manage/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>分体列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <el-table :data="branchList" size="small">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-form inline class="detail">
              <el-form-item label="公众号主体名称">
                <span>{{ scope.row.principalName }}</span>
              </el-form-item>
              <el-form-item label="创建时间">
                <span>{{ new Date(scope.row.gmtCreate).toLocaleString() }}</span>
              </el-form-item>
              <el-form-item label="提现限额">
                <span>{{ scope.row.withdrawAmount }}￥</span>
              </el-form-item>
              <el-form-item label="公众号类型">
                <span v-if="scope.row.branchType === 0">订阅号</span>
                <span v-if="scope.row.branchType === 1">升级订阅号</span>
                <span v-if="scope.row.branchType === 2">服务号</span>
              </el-form-item>
              <el-form-item label="用户总数">
                <span>{{ scope.row.totalUser }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          label="公众号">
          <template slot-scope="scope">
            <div class="user_img">
              <img :src="scope.row.headImagePath" alt="头像" width="100%" v-if="scope.row.headImagePath">
            </div>
            <p class="nickname">{{ scope.row.nickname }}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="brandName"
          label="名称">
        </el-table-column>
        <el-table-column
          prop="brandSlogan"
          label="标语">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地区">
          <template slot-scope="scope">
            <span>{{ scope.row.province }} {{ scope.row.city }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="contactPhone"
          label="联系方式">
        </el-table-column>
        <el-table-column
          prop="payDeductPoint"
          label="扣点数">
          <template slot-scope="scope">
            <span>{{ scope.row.payDeductPoint / 10 }}%</span>
          </template>
        </el-table-column>
        <el-table-column
          label="设置扣点">
          <template slot-scope="scope">
            <el-popover
              placement="top"
              width="200">
              <p style="font-size: 12px;margin-left: 8px;margin-bottom: 8px;">注：单位千分之，范围10~100</p>
              <el-input v-model.number="point" placeholder="请输入扣点数" size="mini" style="width: 120px;"/>
              <el-button size="mini" type="primary" @click="setPoint(scope.row.id, scope.$index)">确定</el-button>
              <el-button size="small" type="primary" slot="reference" @click="point = scope.row.payDeductPoint">设置扣点</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'branch',
  data () {
    return {
      url: {
        list: '/branch/list',
        updatePoint: '/branch/pay/deduct/point/update'
      },
      branchList: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      point: null
    }
  },
  methods: {
    initList () {
      this.$ajax.post(this.url.list, {pageNum: this.page.pageNum, pageSize: this.page.pageSize})
        .then(res => {
          if (res.data.success) {
            this.branchList = res.data.data.list
            this.page.total = res.data.data.total
          }
        })
    },
    setPoint (id, index) {
      if (this.point === this.branchList[index].payDeductPoint) {
        document.body.click()
        return
      }
      let point = parseInt(this.point)
      if (point >= 10 && point <= 100) {
        let params = {
          branchId: id,
          deductPoint: point
        }
        this.$ajax.post(this.url.updatePoint, params)
          .then(res => {
            if (res.data.success) {
              document.body.click()
              this.$message.success('更新成功')
              this.initList()
            }
          })
      } else {
        this.$message.error('输入数据格式不正确')
      }
    }
  },
  created () {
    this.initList()
  }
}
</script>

<style scoped>
  .user_img{
    overflow: hidden;
    float: left;
    width: 40px;
    height: 40px;
    border-radius: 100%;
  }
  .nickname{
    float: left;
    line-height: 40px;
  }
  .detail {
    font-size: 0;
  }
  .detail label {
    width: 90px;
    color: #99a9bf;
  }
  .detail .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 33.333%;
  }
</style>
